<template>
  <div class="contact-us">
    <heads title="实名认证"></heads>
    <div class="main-content">
      <van-form @submit="submit">
       
         <van-cell-group>           
            <van-cell value>
              <template #default>               
                <div class="item flex space-between">
                 <p class="key">企业名称</p>
                  <input type="text" v-model="formData.companyName" placeholder="请输入企业名称">
                </div>
              </template>
            </van-cell>
             <van-cell value>
              <template #default>               
                <div class="item flex space-between">
                 <p class="key">统一社会信用代码</p>
                  <input type="text" maxlength="18" v-model="formData.idCard" placeholder="请输入统一社会信用代码">
                </div>
              </template>
            </van-cell>
              <van-cell value>
              <template #default>               
                <div class="item flex space-between">
                 <p class="key">业务联系人</p>
                  <input type="text" v-model="formData.concatName" placeholder="请输入业务联系人">
                </div>
              </template>
            </van-cell>
               <van-cell value>
              <template #default>               
                <div class="item flex space-between">
                 <p class="key">业务联系人电话</p>
                  <input type="tel" v-model="formData.tel" placeholder="请输入业务联系人电话">
                </div>
              </template>
            </van-cell>
             <van-cell value>
              <template #default>               
                <div class="item flex space-between">
                 <p class="key">主营业务</p>
                 <div @click="showPicker = true">{{ formData.tel}} 请选择主营业务 <van-icon name="arrow" /></div>
                  
                  <van-popup v-model="showPicker" round position="bottom">
                    <van-picker
                      show-toolbar
                      :columns="columns"
                      @cancel="showPicker = false"
                      @confirm="onConfirm"
                    />
                  </van-popup>
                </div>
              </template>
            </van-cell>
    
      
            
            <!-- <van-cell value>
              <template #default>               
                <div class="item item-code flex space-between">
                 <p class="key">验证码</p>
                 <div class="value flex">
                   <input type="text" v-model="formData.code"> <p class="btn-code color-primary" @click="getCode">{{ formData.codeText }}</p>
                 </div>
                </div>
              </template>
            </van-cell> -->
 
          </van-cell-group>
          <van-cell-group>
           <van-cell value>
              <template #default>               
                <div class="item item-image">
                 <p class="key">企业形象</p>
               <van-uploader v-model="formData.fileList" multiple :max-count="8" />
                </div>
              </template>
            </van-cell>
            </van-cell-group>
          
          <!-- 主营地址 -->
          <van-cell-group> 
               <van-cell value>
              <template #default>               
                <div class="item flex space-between">
                 <!-- <p class="key">主营地址</p> -->
                  <van-field
                    v-model="formData.address"
                    rows="2"
                    autosize
                    label="主营地址"
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入主营地址"
                    show-word-limit
                  />
                </div>
              </template>
            </van-cell>
          </van-cell-group>
           <!-- 营业执照信息 -->
           <van-cell-group>           
            <van-cell value>
              <template #default>               
                <div class="item item-card flex space-between">
                  <div class="cell">
                    <h1>上传营业执照<span class="color-primary">正面</span></h1>
                    <p>营业执照信息清晰可见</p>           
                  </div>
                  <van-uploader :after-read="uploadForehead">
                  <div class="card-img" :style="'backgroundImage:url('+ formData.yImgforehead +')'"></div>
</van-uploader>
                </div>
              </template>
            </van-cell>            
          </van-cell-group>
          <!-- end -->
          <!-- 身份证正面信息 -->
           <van-cell-group>           
            <van-cell value>
              <template #default>               
                <div class="item item-card flex space-between">
                  <div class="cell">
                    <h1>上传身份证<span class="color-primary">正面</span></h1>
                    <p>身份证信息清晰可见人面像</p>           
                  </div>
                  <van-uploader :after-read="uploadForehead">
                  <div class="card-img" :style="'backgroundImage:url('+ formData.cardImgforehead +')'"></div>
</van-uploader>
                </div>
              </template>
            </van-cell>            
          </van-cell-group>
          <!-- end -->

           <!-- 身份证反面信息 -->
           <van-cell-group>           
            <van-cell value>
              <template #default>               
                <div class="item item-card flex space-between">
                  <div class="cell">
                    <h1>上传身份证<span class="color-primary">反面</span></h1>
                    <p>身份证信息清晰可见国徽面</p>
                  </div>
                  <van-uploader :after-read="uploadBack">
   <div class="card-img" :style="'backgroundImage:url('+ formData.cardImgBack +')'">
                    
                  </div>
</van-uploader>
                 
                  
                </div>
              </template>
            </van-cell>            
          </van-cell-group>
          <!-- end -->
          <!-- 省市县弹框 -->
           <!-- 时间 -->
      <van-popup v-model="formData.areaShow" position="bottom">
       <van-area  :area-list="formData.areaList" @confirm="areaChange"/>
        
      </van-popup>
          <!-- end -->
          <div class="place-holder"></div>
        <div class="btn-box">
          <van-button type="info" class="btn-common" native-type="submit">提交审核</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>

import Mock from "mockjs";
import Vue from 'vue';
import * as valide  from '@/js/common/form.js';
import area from "@/js/json/area.js";
import { Uploader,Toast,Area} from 'vant';
Vue.use(Uploader);
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      showPicker:false,
      formData: {
        areaList:area,
        areaShow:false,
        name:'',
        idCard:'',
        phone:'',
        code:'',
        address:'',// 主营地址
        yImgforehead:require('@/assets/images/icon-card-01.png'),//营业执照正面
        cardImgforehead:require('@/assets/images/icon-card-01.png'),//身份证正面
        cardImgBack:require('@/assets/images/icon-card-02.png'),//身份证反面
        fileList:[],// 企业形象照片
        cardImgforeheadStatus:false,
        cardImgBackStatus:false,
        codeText:'获取验证码',
        timer:null,
        count:10,
        disabled:false,
        adress:{adress:'请选择'}
  
      }
    };
  },

  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    //表单提交
    submit() {
      let _this = this;
      if(this.judgeData()){
         let params = {
        name: _this.formData.name,
        card_number: _this.formData.idCard,
        phone: _this.formData.phone,
        img1: _this.formData.cardImgforehead,
        img2: _this.formData.cardImgBack,
        address:_this.formData.adress.adress,
        area_code:_this.formData.adress.areaCode,
      };
      _this.$ajax
        .post(`${_this.$baseUrl}/sender/userAudit`, params)
        .then(function(res) {
          if (res.data.code == 500) {
            Toast("提交成功!");
            setTimeout(() => {
              _this.$router.push({ path: "/userCenter", query: {} });
            }, 1500);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }

      
    },
    //获取验证码
    getCode(){
      if(!this.formData.disabled){
         this.formData.disabled = true;
          this.formData.timer = setInterval(() => {           
        if(this.formData.count > 1){
          this.formData.count--
          this.formData.codeText =  `${ this.formData.count }s`
          
        }else{
           this.formData.count = 10
          this.formData.codeText =  `获取验证码`;
           this.formData.disabled = false;
          clearInterval(this.formData.timer)

        }
      }, 1000);
      }
    

    },
    //图片上传-身份证正面
    uploadForehead(file){
    let _this = this;
      let formData = new FormData();
        formData.append('file', file.file);

      //身份证正面
            this.$ajax
        .post(`${this.$baseUrl}/index/upload`, formData)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.formData.cardImgforehead = _this.$imgUrl+res.data.data.url
                        _this.formData.cardImgforeheadStatus = true

            Toast.success("上传成功!");           
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      
    },
    //图片上传-身份证反面
      uploadBack(file){
      //身份证反面
       let _this = this;
      let formData = new FormData();
        formData.append('file', file.file);

      //身份证正面
            this.$ajax
        .post(`${this.$baseUrl}/index/upload`, formData)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.formData.cardImgBack = _this.$imgUrl+res.data.data.url
            _this.formData.cardImgBackStatus = true
            Toast.success("上传成功!");           
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    areaToggle(){
      this.formData.areaShow = !this.formData.areaShow;

    },
    areaChange(e){
      let _this = this;
     
      this.formData.adress = {
        adress:e[0].name + e[1].name + e[2].name,
        areaCode:e[2].code
      }
       this.formData.areaShow = false;

    },
    //表单校验
    judgeData(){
      if(!this.formData.name){
        Toast('请输入姓名')
        return false
      }
      if(!valide.default.idCard(this.formData.idCard)){
        Toast('请输入正确的身份证号')
        return false
      }
      if(!valide.default.phone(this.formData.phone)){
        Toast('请输入正确的手机号')
        return false
      }
        if(this.formData.adress.adress === '请选择'){
        Toast('请选择服务区域')
        return false
      }
      // if(!this.formData.code){
      //   Toast('请输入验证码')
      //   return false
      // }
      if(!this.formData.cardImgforeheadStatus){
        Toast('请上传身份证正面照')
        return false
      }
      if(!this.formData.cardImgBackStatus){
        Toast('请上传身份证反面照')
        return false
      }
      return true
    },
    

  },
  created() {
    let _this = this;
    // console.log(valide)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.contact-us {
  .main-content {
     min-height: 92vh;
    margin-top: 0;
    padding: 0.3rem;
    box-sizing: border-box;
  }
 
  .van-cell {
    padding: 0.3rem;
    border-radius: .1rem;
    font-size: .28rem;
    &.van-field{
      padding: 0;
    }
    
  }
  /deep/ .van-cell-group{
    margin-bottom: .3rem;
    border-radius: .1rem;
    .cell-title{
      font-size: .28rem;
      color: #999;
    }
    .item-code{
        .value input{
         width: 120px;
        }
        .btn-code{
          padding-left: .3rem;
          border-left: .5px solid #D8D8D8;
          margin-left: .3rem;
          width: 2rem;
        }
      }
    .item{
      &.item-image{
        .key{
          padding-bottom: .3rem;
        }
      }
      input{
        border: none;
      }
      &.item-card{
        padding:.2rem;
        box-sizing: border-box;
        .cell{
          padding-right: .3rem;
          box-sizing: border-box;
          flex: 1
        }
        .card-img{
          width: 2.88rem;
          height: 1.92rem;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
      }
      
      input{
        text-align: right;
      }
      h1{
        font-size: .3rem;
        color: #1C1C1C;
      }
      p{
        color: #333;
      }
     
      
    }
  }
  textarea {
    min-height: 5rem;
    
  }
  .place-holder{
    height: 1.32rem;
  }
  .btn-box {
    box-sizing: border-box;
position: fixed;
width: 100%;
left: 0;
bottom: 0;
padding: .2rem .3rem;
background: #fff;    
    button{
      width: 100%;
      line-height: .88rem;
      display: block;
      border-radius: 6px;
     
    }
  }
}
</style>
